import React, { Component } from 'react';
import { SyncOutlined } from '@ant-design/icons';
import style from './topic.module.css'
import axios from 'axios';

class Topic extends Component {
    state={
        page:1,
        pagecount:4,
        topiclist:[]
    }
    componentDidMount(){
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        let {page} = this.state
        axios({
            url:"/home_list/hot",
            method:"post",
            headers: headerJSON,
            data:{
                page:page,
                pagecount:4
            }
        }).then(res=>{
            console.log(res)
            this.setState({
                topiclist:res.data.lists,
                time:new Date().getTime()
            })
        })
    }
    aa=()=>{
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        let {page} = this.state
        let count = ''
        if(page === 1){
            count = 2
            console.log(count)
        }else{
            count = 1
            console.log(count)
        }
        axios({
            url:"/home_list/hot",
            method:"post",
            headers: headerJSON,
            data:{
                page:count,
                pagecount:4
            }
        }).then(res=>{
            console.log(res)
            this.setState({
                topiclist:res.data.lists,
                time:new Date().getTime()
            })
        })
        this.setState({
            page:count
        })
        
    }
    render() {
        let {topiclist} =this.state
        console.log(topiclist)
        return (
            <div className={style.box}>
                <p>热门主题<span onClick={this.aa} className={style.change}><SyncOutlined /> 换一换</span></p>
                {/* <div>
                    {
                        topiclist.map((item,i)=><div key={i} className={style.small}>
                            <p className={style.til}>{item.name}</p>
                        <p className={style.content}>{item.content}</p>
                        </div>)
                    }   
                </div> */}
                {topiclist.filter(item=>item.id===1||item.id===5).map((item,i)=>
                <div className={style.small1} key={item.id}>
                    <p className={style.til}>{item.specials}</p>
                    <p className={style.content}>{item.text}</p>
                </div>
                )}
                {topiclist.filter(item=>item.id===2||item.id===6).map((item,i)=>
                <div className={style.small2} key={item.id}>
                    <p className={style.til}>{item.specials}</p>
                    <p className={style.content}>{item.text}</p>
                </div>
                )}
                {topiclist.filter(item=>item.id===3||item.id===7).map((item,i)=>
                <div className={style.small3} key={item.id}>
                    <p className={style.til}>{item.specials}</p>
                    <p className={style.content}>{item.text}</p>
                </div>
                )}
                {topiclist.filter(item=>item.id===4||item.id===8).map((item,i)=>
                <div className={style.small4} key={item.id}>
                    <p className={style.til}>{item.specials}</p>
                    <p className={style.content}>{item.text}</p>
                </div>
                )}
            </div>
        );
    }
}

export default Topic;